<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>分步表单</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
  <link rel="stylesheet" href="../../js/lay-module/step-lay/step.css" media="all">
  <style>
    .layui-carousel > [carousel-item]{
      position: relative;
      width: 100%;
      height: 100%;
      overflow: scroll;
    }
  </style>
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <div class="layui-fluid">
      <div class="layui-card">
        <div class="layui-card-body" style="padding-top: 40px;">
          <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
            <div carousel-item>
              <div>
                <form class="layui-form layuimini-form" action="" lay-filter="example">
                  <div class="layui-form-item">
                    <label class="layui-form-label required" >课程名称</label>
                    <div class="layui-input-block">
                      <input type="text" name="course" lay-verify="required" autocomplete="off" placeholder="请输入课程名称" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label required">讲师</label>
                    <div class="layui-input-block">
                      <input type="text" name="teacher" lay-verify="required" placeholder="请输入讲师姓名" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label required">课时</label>
                    <div class="layui-input-block">
                      <input type="text" name="idCard" lay-verify="required" placeholder="请输入课时" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label required">培训时间</label>
                    <div class="layui-input-block">
                      <input type="date" name="traintime" lay-verify="required" placeholder="请输入培训时间" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label required">培训地点</label>
                    <div class="layui-input-block">
                      <input type="text" name="place" lay-verify="phone" autocomplete="off" placeholder="请输入培训地点" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label required" >学员人数</label>
                    <div class="layui-input-block">
                      <input type="text" name="number" lay-verify="required" autocomplete="off" placeholder="请输入学员人数" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-inline layui-form-item">
                    <label class="layui-form-label required">岗位类别</label>
                    <div class="layui-input-inline">
                      <select name="post" lay-filter="aihao">
                        <option value="">请选择岗位类别</option>
                        <option value="1">技工岗</option>
                        <option value="2">技术岗</option>
                        <option value="3">维护岗</option>
                      </select>
                    </div>
                  </div>
                  <div class="layui-inline layui-form-item">
                    <label class="layui-form-label required">培训形式</label>
                    <div class="layui-input-inline">
                      <select name="form" lay-filter="aihao">
                        <option value="">请选择培训形式</option>
                        <option value="1">内训</option>
                        <option value="2">外训</option>
                      </select>
                    </div>
                  </div>
                  <div class="layui-inline layui-form-item">
                    <label class="layui-form-label required">培训类型</label>
                    <div class="layui-input-inline">
                      <select name="type" lay-filter="aihao">
                        <option value="">请选择培训类型</option>
                        <option value="1">车间班组级</option>
                        <option value="2">车间班组级</option>
                        <option value="3">车间班组级</option>
                      </select>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button class="layui-btn" lay-submit lay-filter="formStep">
                        &emsp;下一步&emsp;
                      </button>
                    </div>
                  </div>

<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
  layui.use([ 'form', 'step'], function () {
    var $ = layui.$,
            form = layui.form,
            step = layui.step;

    step.render({
      elem: '#stepForm',
      filter: 'stepForm',
      width: '100%', //设置容器宽度
      stepWidth: '750px',
      height: '500px',
      stepItems: [{
        title: '填写培训需求信息'
      }, {
        title: '确认培训需求信息'
      }, {
        title: '完成'
      }]
    });


    form.on('submit(formStep)', function (data) {
      step.next('#stepForm');
      return false;
    });

    form.on('submit(formStep2)', function (data) {
      step.next('#stepForm');
      return false;
    });

    $('.pre').click(function () {
      step.pre('#stepForm');
    });

    $('.next').click(function () {
      step.next('#stepForm');
    });
  })
</script>
</body>
</html>